<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <app></app>
</div>
</body>
<script>
	new Vue({
		el: "#root",
        components:{
			App:{
				data(){
					return {
						username:"zhangsan",
                        age:12
                    }
                },
				template:(`
				    <div>
				        <h3>App</h3>
				        <child :username="username" :age="age" sex="男"></child>
                    </div>
				`),
                components:{
					Child:{
						// 数组
						// props:["username","age"],

                        // 对象
                        // props:{
						// 	// 接收的属性名字为username,类型必须是一个字符串
						//     username:String,
                        //     // 接收的属性名字为username,类型必须是一个数字
						//     // username:Number
                        //     age:Number
                        // },

                        // props的值是一个对象，对象属性名即是接收的参数的名字，属性的值可以设置为对象
                        props:{
						    username:{
								// 类型
								type:String
                            },
                            age:{
								type:Number
                            },
                            sex:{
								type:String,
                                required:true,// 不允许省略该属性
                            },
                            hobby:{
								type:String,
                                default:"学习",// 默认属性
                            },
                            arr:{
								// 如果类型是对象或数组，那么默认值必须通过工厂函数进行返回
								type:Array,
                                default(){
									return [1,2,3,4]
                                }
                            }
                        },
						template:(`
						    <div>
						        <h3>Child</h3>
						        <p>username:{{username}}</p>
						        <p>age:{{age}}</p>
						        <p>hobby:{{hobby}}</p>
						        <p>arr:{{arr}}</p>
                            </div>
						`)
                    }
                }
            }
        }
	})
</script>
</html>